<template>
  <div class="comment-box">
    <!-- 具体某条评论 -->
    <van-cell>
      <!-- 自定义内容 -->
      <template>
        <div class="commentinfo-box">
          <!-- 头像 -->
          <van-image fit="cover" round :src="currentRply.aut_photo" />
          <!-- 信息盒子 -->
          <div class="info-box">
            <p class="autname">{{ currentRply.aut_name }}</p>
            <div class="cmcontent">{{ currentRply.content }}</div>
            <!-- 时间跟回复盒子 -->
            <div>
              <span class="cmtime">{{ currentRply.pubdate | getYear }}</span>
            </div>
          </div>
        </div>
      </template>
    </van-cell>
    <!-- 分割线 -->
    <van-divider>回复列表</van-divider>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.com_id">
        <!-- 自定义内容 -->
        <template>
          <div class="commentinfo-box">
            <!-- 头像 -->
            <van-image fit="cover" round :src="item.aut_photo" />
            <!-- 信息盒子 -->
            <div class="info-box">
              <p class="autname">{{ item.aut_name }}</p>
              <div class="cmcontent">{{ item.content }}</div>
              <!-- 时间跟回复盒子 -->
              <div>
                <span class="cmtime">{{ item.pubdate | getYear }}</span>
              </div>
            </div>
          </div>
        </template>
      </van-cell>
    </van-list>
    <!-- 发布 -->
    <div class="send-box">
      <van-field
        v-model.trim="userCmCt"
        center
        clearable
        @keyup.enter="sendCm"
        placeholder="请输入评论内容"
      >
        <template #button>
          <van-button @click="sendCm" size="small" type="info">发布</van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
// 导入评论接口
import { getCommentAPI, commentArticalAPI } from "@/api";
export default {
  props: ["currentRply"],
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      offset: null,
      userCmCt: "",
    };
  },
  methods: {
    async onLoad() {
      // 获取回复数据
      let res = await getCommentAPI({
        type: "c",
        source: this.currentRply.com_id,
        offset: this.offset,
      });
      //  把数据保存到list里
      this.list.push(...res.data.data.results);
      //   把最显示出来后一个评论得id赋值给分页变量
      this.offset = res.data.data.last_id;
      //   把加载状态改为false，方便下次进行加载
      this.loading = false;
      //   判断是否加载完毕
      if (res.data.data.end_id == this.offset) {
        this.finished = true;
      }
    },
    // 发布功能(回复评论)
    async sendCm() {
      //非空判断
      if (!this.userCmCt) return this.$toast("内容不能为空");
      // 发起请求
      let res = await commentArticalAPI({
        target: this.currentRply.com_id,
        content: this.userCmCt,
        art_id: this.$route.query.id,
      });
      //  为了避免刷新，增加服务器的请求压力，直接把返回的评论数据插入到数组中即可
      this.list.unshift(res.data.data.new_obj);
      //   清空输入框内容
      this.userCmCt = "";
      // 提示用户登录成功
      this.$toast.success("评论成功");
    },
  },
};
</script>

<style lang='less' scoped>
.comment-box {
  // 评论区样式
  .van-list {
    margin-bottom: 53px;
  }
  .commentinfo-box {
    display: flex;

    .van-image {
      width: 50px;
      height: 50px;
      margin-right: 15px;
    }
    .info-box {
      flex: 1;
      .autname {
        color: rgb(120, 140, 170);
        margin-bottom: 5px;
      }
      .cmtime {
        color: rgb(163, 160, 158);
      }
      .cmreply {
        vertical-align: middle;
        margin-left: 10px;
      }
    }
  }

  //   发表评论样式
  .send-box {
    position: fixed;
    bottom: 0;
    left: 0;
    // 定位后是没有宽度的，靠内容撑开
    width: 100%;
  }
}
</style>